<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>蜻蜓FM</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<style>
		html, #wrap{
			background-color: #fafafa;
		}
		html, body{
			overflow: hidden; height: 100%; min-height: 100%;
			background-color: transparent;
		}
		#wrap{
			min-height: 100%;
			-webkit-transition: all .3s;
			transition:all .3s;
			-webkit-transform: translateY(-100%);
			transform: translateY(-100%);
		}
		#wrap.in{
			-webkit-transform: translateY(0%);
			transform: translateY(0%);
		}
		ul{
			overflow: hidden; padding: 10px 0;
		}
		ul li{
			width: 25%; float: left; text-align: center;
			margin-bottom: 16px;
		}
		ul li div{
			color: #606060; font-size: 14px;
			padding: 6px 0; min-width: 4.6em; border: 1px solid #ebebeb;
			border-radius: 10px; margin: 0 10px;
			background-color: #fff;
		}
		ul li:first-child div{
			color: #e13430; border: none; background-color: transparent;
		}
		@-webkit-keyframes tada {
		  0% {
		    -webkit-transform: scale3d(1, 1, 1);
		    transform: scale3d(1, 1, 1);
		  }

		  10%, 20% {
		    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		  }

		  30%, 50%, 70%, 90% {
		    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		  }

		  40%, 60%, 80% {
		    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		  }

		  100% {
		    -webkit-transform: scale3d(1, 1, 1);
		    transform: scale3d(1, 1, 1);
		  }
		}

		@keyframes tada {
		  0% {
		    -webkit-transform: scale3d(1, 1, 1);
		    -ms-transform: scale3d(1, 1, 1);
		    transform: scale3d(1, 1, 1);
		  }

		  10%, 20% {
		    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		    -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
		  }

		  30%, 50%, 70%, 90% {
		    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
		  }

		  40%, 60%, 80% {
		    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
		  }

		  100% {
		    -webkit-transform: scale3d(1, 1, 1);
		    -ms-transform: scale3d(1, 1, 1);
		    transform: scale3d(1, 1, 1);
		  }
		}

		.tada {
		  -webkit-animation-name: tada;
		  animation-name: tada;
		}
	</style>
</head>
<body>
    <div id="wrap">
    			<div class="aui-content aui-card">
			<div class="aui-form">
				<div class="aui-input-row">
					<label class="aui-input-addon">胡华成</label>
					<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="demo">
				</div>
				<div class="aui-input-row">
					<label class="aui-input-addon">张鹏</label>
					<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="demo" checked>
				</div>
				<div class="aui-input-row">
					<label class="aui-input-addon">潘猛</label>
					<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="demo" checked>
				</div>
				<div class="aui-input-row">
					<label class="aui-input-addon">胡华成</label>
					<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="demo">
				</div>
				<div class="aui-input-row">
					<label class="aui-input-addon">张鹏</label>
					<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="demo" checked>
				</div>
				<div class="aui-input-row">
					<label class="aui-input-addon">潘猛</label>
					<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="demo" checked>
				</div>
			</div>
		</div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/Sortable.min.js"></script>
<script type="text/javascript">
	function slideUp(){
		var wrap = $api.byId('wrap');
		$api.removeCls(wrap, 'in');
		setTimeout(function(){
			api.closeFrame();
		},350);
	}
    apiready = function(){
		var wrap = $api.byId('wrap');
		$api.addCls(wrap, 'in');

		//var el = $api.dom('#wrap ul');
		//var sortable = Sortable.create(el);
    };
</script>
</html>